<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="style/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="style/js/pop-ico.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.15.0/messages_zh.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.15.0/additional-methods.js"></script>
<script>
	$(function() {
		$.validator.setDefaults({
			submitHandler : function(form) {
				//alert("提交事件!");
				form.submit();
			}
		});

		$("#registerform").validate(
				{
					//debug : true, //调试模式，即使验证成功也不会跳转到目标页面
					rules : { //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式)
						userName : {
							required : true, //必填。如果验证方法不需要参数，则配置为true
							rangelength : [ 6, 12 ],
							/* remote:{
	                            url:"validateUsername.do",
	                            type:"post"
	                        } */
						},
						password : {
							required : true,
							rangelength : [ 6, 20 ]
						},
						confirmpassword : {
							required : true,
							rangelength : [ 6, 20 ],
							equalTo : '#password' //表示和id="spass"的值相同
						},
						email : {
							required : true,
							email : true
						},
						tel : {
							required : true
						}
					},
					messages : {
						userName : {
							required : "请输入用户名",
							rangelength : $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
							/* remote:"该用户名已存在！" */
						},
						password : {
							required : "请输入密码",
							rangelength : $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串")
						},
						confirmpassword : {
							required : "请再次输入密码",
							equalTo : "两次密码必须一致" //表示和id="spass"的值相同
						},
						email : {
							required : "请填写邮件",
							email : "邮箱格式不正确"
						},
						tel : {
							required : "请输入电话号码"
						}
					}
				});
	});

/* 	function selecthead() {
		alert("图片路径是headimage" + $("#headimage").val());
	} */

	function choseheadimage(src) {
		$("#headimage").val(src);
	}
</script>
<style type="text/css">
body {
	margin: 0px;
	background: url(style/image/background/index.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	/* background: #DCDDDF
		url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
	color: #000;
	font: 14px Arial;
	margin: 0 auto;
	padding: 0;
	position: relative; */
}
label{
color:white;
}
a {
	text-decoration: none;
}

.cmt-ico .head-ico img {
	border: 1px dashed #F60;
	padding: 2px;
}

.pop-ico {
	position: absolute;
	width: 850px;
	min-height: 420px;
	top: -230px;
	left: -300px;
	background: #FFF;
	border: 1px solid #D7D7D7;
	z-index: 100
}

.pop-ico .ico-title {
	height: 20px;
	background-color: #F0F0F0;
	color: #0078B6;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px
}

.pop-ico .ico-title a {
	cursor: pointer;
	display: block;
	width: 15px;
	height: 15px;
	text-align: center;
	position: absolute;
	right: 5px;
	top: 5px;
}

.pop-ico .ico-list {
	padding: 7px
}

.pop-ico .ico-list a img {
	border: 1px dashed #DDD;
	cursor: pointer;
}

.pop-ico .ico-list a:hover img, .pop-ico .ico-list .cur img {
	border: 1px dashed #F60;
}
</style>
<title>欢迎注册</title>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="row clearfix">
					<div class="col-md-10 column"></div>
					<div class="col-md-2 column">
						<button type="button" onclick="window.location.href='index.html'"
							class="btn btn-default btn-primary">返回</button>
					</div>
				</div>
				<div class="row clearfix">
					<div class="col-md-4 column"></div>
					<div class="col-md-4 column">
						<form id="registerform" action="register.do"
							method="post" role="form">
							<div class="form-group">
								<label for="exampleInputEmail1">用户名</label><input
									placeholder="请输入6-12位英文或数字" class="form-control"
									name="userName" id="userName" />
							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">密码</label><input
									placeholder="请输入6-20位英文或数字，区分大小写" type="password"
									name="password" class="form-control" id="password" />
							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">再次输入密码</label><input
									placeholder="请再次输入密码" type="password" class="form-control"
									name="confirmpassword" id="confirmpassword" />
							</div>
							<div class="form-group">
								<label for="exampleInputEmail1">邮箱</label><input
									placeholder="请输入邮箱" class="form-control" name="email"
									id="email" />
							</div>
							<div class="form-group">
								<label for="exampleInputEmail1">手机号码</label><input
									placeholder="请输入手机号码" class="form-control" name="tel" id="tel" />
								<input class="form-control" name="headimage" id="headimage" value="style/image/head/profileico1.jpg"
									style="visibility: hidden; display: none;" />
							</div>
							<div class="form-group">
								<label for="exampleInputFile">选择头像</label>
								<div class="cmt-ico" style="position: relative">
									<a class="head-ico show-ico-btn" title="选择头像"><img
										class="focus-ico" src="style/image/head/profileico1.jpg"
										alt="选择头像" width="200" height="200">
									</a>
									<!-- 弹出窗口  start-->
									<div class="pop-ico" style="display: none">
										<div class="ico-title">
											<span>选择头像</span> <a title="关闭窗口" class="hide-ico-btn">x</a>
										</div>
										<div class="ico-list">
											<a data-src="style/image/head/profileico1.jpg" class="cur"><img
												src="style/image/head/profileico1.jpg" width="200"
												onclick="choseheadimage('style/image/head/profileico1.jpg')"
												height="200"></a> <a
												data-src="style/image/head/profileico2.jpg"><img
												src="style/image/head/profileico2.jpg" width="200"
												onclick="choseheadimage('style/image/head/profileico2.jpg')"
												height="200"></a> <a
												data-src="style/image/head/profileico3.jpg"><img
												src="style/image/head/profileico3.jpg" width="200"
												onclick="choseheadimage('style/image/head/profileico3.jpg')"
												height="200"></a> <a
												data-src="style/image/head/profileico4.jpg"><img
												src="style/image/head/profileico4.jpg" width="200"
												onclick="choseheadimage('style/image/head/profileico4.jpg')"
												height="200"></a> <a
												data-src="style/image/head/profileico5.jpg"><img
												src="style/image/head/profileico5.jpg" width="200"
												onclick="choseheadimage('style/image/head/profileico5.jpg')"
												height="200"></a> <a
												data-src="style/image/head/profileico6.jpg"><img
												src="style/image/head/profileico6.jpg" width="200"
												onclick="choseheadimage('style/image/head/profileico6.jpg')"
												height="200"></a> <a
												data-src="style/image/head/profileico7.jpg"><img
												src="style/image/head/profileico7.jpg" width="200"
												onclick="choseheadimage('style/image/head/profileico7.jpg')"
												height="200"></a> <a
												data-src="style/image/head/profileico8.jpg"><img
												src="style/image/head/profileico8.jpg" width="200"
												onclick="choseheadimage('style/image/head/profileico8.jpg')"
												height="200"></a>
										</div>
									</div>
									<!-- 弹出窗口  end-->
								</div>
								<p class="help-block">Example block-level help text here.</p>
							</div>
							<button type="submit" class="btn btn-default">Submit</button>
						</form>
					</div>
					<div class="col-md-4 column"></div>
				</div>
			</div>
		</div>
	</div>
</body>